<template>
  <div class="container">
    <h3>根据坐标，回显点、线、多边形、圆形</h3>
    <p>大剑师兰特, 还是大剑师兰特</p>
    <h4>
      <button type="primary" size="mini" @click="showPoint()">显示点</button>
      <button type="primary" size="mini" @click="showLine()">显示线</button>
      <button type="primary" size="mini" @click="showCircle()">显示圆</button>
      <button type="primary" size="mini" @click="showPolygon()">
        显示多边形
      </button>
      <button type="primary" size="mini" @click="clearLayer()">清除图层</button>
    </h4>
    <div id="vue-openlayers"></div>
  </div>
</template>
 
<script>
import "ol/ol.css";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import OSM from "ol/source/OSM";
import Feature from "ol/Feature";
import { Point, LineString, Circle, Polygon } from "ol/geom";
import Style from "ol/style/Style";
import Fill from "ol/style/Fill";
import Stroke from "ol/style/Stroke";
import CircleStyle from "ol/style/Circle";

export default {
  data() {
    return {
      map: null,
      dataSource: new VectorSource({ wrapX: false }),
      pointData: [116, 39],
      lineData: [
        [116, 39],
        [116.005, 39],
        [116.005, 39.005],
      ],
      polygonData: [
        [
          [116.005, 39.005],
          [116.006, 39.008],
          [116.008, 39.008],
          [116.006, 39.009],
          [116.005, 39.005],
        ],
      ],
      circleData: { circleCenter: [115.992, 39], circleRadius: 0.005 },
    };
  },

  methods: {
    // 设置vector样式
    // featureStyle() {
    //   let style = new Style({
    //     fill: new Fill({
    //       color: "#00f",
    //     }),
    //     stroke: new Stroke({
    //       width: 2,
    //       color: "#0f0",
    //     }),
    //     image: new CircleStyle({
    //       //点样式
    //       radius: 10,
    //       fill: new Fill({
    //         color: "#ff0000",
    //       }),
    //     }),
    //   });
    //   return style;
    // },
    // 清除vector数据源
    clearLayer() {
      this.dataSource.clear();
    },
    // 显示点
    showPoint() {
      let layer = new VectorLayer({
        source: new VectorSource({}),
      });
      let pointFeature = new Feature({
        geometry: new Point(this.pointData),
      });

      layer.getSource().addFeature(pointFeature);
      this.map.addLayer(layer);
    },
    // 显示线段
    showLine() {
      let layer = new VectorLayer({
        source: new VectorSource({}),
      });
      let lineFeature = new Feature({
        geometry: new LineString(this.lineData),
      });
      layer.getSource().addFeature(lineFeature);
      this.map.addLayer(layer);
    },
    // 显示圆形
    showCircle() {
      let layer = new VectorLayer({
        source: new VectorSource({}),
      });
      let circleFeature = new Feature({
        geometry: new Circle(
          this.circleData.circleCenter,
          this.circleData.circleRadius
        ),
      });
      layer.getSource().addFeature(circleFeature);
      this.map.addLayer(layer);
    },
    // 显示多边形
    showPolygon() {
      let layer = new VectorLayer({
        source: new VectorSource({}),
        style:new Style({
          fill: new Fill({
          color: "#00f",
        }),
        stroke: new Stroke({
          width: 2,
          color: "#0f0",
        }),
        image: new CircleStyle({
          //点样式
          radius: 10,
          fill: new Fill({
            color: "#ff0000",
          }),
        }),
        })
      });
      let polygonFeature = new Feature({
        geometry: new Polygon(this.polygonData),
      });
      console.log(this.polygonData)
      layer.getSource().addFeature(polygonFeature);
      this.map.addLayer(layer);
    },
    // 初始化地图
    initMap() {
      let OSM_Layer = new TileLayer({
        source: new OSM({
          url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
        }),
      });
      let feature_Layer = new VectorLayer({
        source: this.dataSource,
        //style: this.featureStyle(), //统一设置vector样式
      });

      this.map = new Map({
        target: "vue-openlayers",
        layers: [OSM_Layer,feature_Layer],
        view: new View({
          projection: "EPSG:4326",
          center: [116, 39],
          zoom: 14,
        }),
      });
    },
  },
  mounted() {
    this.initMap();
  },
};
</script>
<style scoped>
.container {
  width: 840px;
  height: 570px;
  margin: 50px auto;
  border: 1px solid #42b983;
}
#vue-openlayers {
  width: 800px;
  height: 400px;
  margin: 0 auto;
  border: 1px solid #42b983;
  position: relative;
}
</style>
